<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <!-- <el-col :span="12">
          <el-form-item label="房源名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入房源名称"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12">
          <el-form-item label="所属商圈" prop="bizcircleId">
            <el-select
              v-model="formData.buildId"
              placeholder="商圈所属所属商圈"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in buildOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

        <el-col :span="12">
          <el-form-item label="所属楼盘" prop="bizcircleId">
            <el-select
              v-model="formData.bizcircleId"
              placeholder="请选择所属楼盘"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in bizcircleList"
                :key="index"
                :label="item.buildingName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责经纪人" prop="brokerId">
            <el-select
              v-model="formData.brokerId"
              placeholder="请选择负责经纪人"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in brokerIdOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="装修类型" prop="decorateType">
            <el-radio-group v-model="formData.decorateType" size="medium">
              <el-radio
                v-for="(item, index) in z"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼层" prop="level">
            <el-radio-group v-model="formData.level" size="medium">
              <el-radio :label="0">低</el-radio>
              <el-radio :label="1">中</el-radio>
              <el-radio :label="2">高</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="所在地区" prop="cityIds">
            <el-cascader
              v-model="formData.cityIds"
              :props="field116Props"
              :options="regionList"
              :style="{ width: '100%' }"
              placeholder="所在地区"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="10">
          <el-form-item label="高德地图" prop="field118"> </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="总面积" prop="totalArea">
            <el-input-number
              v-model="formData.totalArea"
              :min="0"
              :precision="2"
              placeholder="总面积"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="朝向" prop="orientation">
            <el-input
              v-model="formData.orientation"
              placeholder="请输入朝向"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="详细地址" prop="addressDesc">
            <el-input
              v-model="formData.addressDesc"
              placeholder="请输入详细地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="销售价格" prop="sellingPrice">
            <el-input
              v-model.number="formData.sellingPrice"
              placeholder="请输入销售价格"
              clearable
              :style="{ width: '100%' }"
            >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可分割" prop="isSegmentation">
            <el-radio-group v-model="formData.isSegmentation" size="medium">
              <el-radio
                v-for="(item, index) in isSegmentationOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可注册" prop="isIncorporated">
            <el-radio-group v-model="formData.isIncorporated" size="medium">
              <el-radio
                v-for="(item, index) in field104Options"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可预约看房时间" prop="bookingTime">
            <el-select
              v-model="formData.bookingTime"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in seeTime"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卖/出租类型" prop="leaseType">
            <el-radio-group v-model="formData.leaseType" size="medium">
              <el-radio
                v-for="(item, index) in leaseTypeOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item label="销售方式" prop="saleMethod">
            <el-radio-group v-model="formData.saleMethod" size="medium">
              <el-radio
                v-for="(item, index) in saleMethodOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="房源照片">
            <el-upload
              action="http://127.0.0.1:8080/broker/broker/BrokderOss"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="商铺设施">
            <el-checkbox-group v-model="formData.facilitiesIds">
              <el-checkbox
                :label="item.id"
                v-for="item in facilityList"
                :key="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="商铺特色">
            <el-checkbox-group v-model="formData.characteristics">
              <el-checkbox
                :label="item.tagId"
                v-for="item in tagsList"
                :key="item.id"
                >{{ item.tagName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { listBroker } from "@/api/broker/broker";
import { regionListService } from "@/api/region/region";
import { listFacility } from "@/api/attribute/facility";
import { listTags } from "@/api/attribute/tags";
import { insertShop } from "@/api/commerce/commerce";
import { listBuilding } from "@/api/building/building";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        communityId: null,
        buildId: 1,
        brokerId: null,
        decorateType: "毛坯",
        level: 0,
        cityIds: [],
        field118: null,
        totalArea: null,
        orientation: null,
        addressDesc: null,
        sellingPrice: null,
        isSegmentation: 0,
        isIncorporated: 1,
        bookingTime: 0,
        leaseType: 0,
        saleMethod: 0,
        imageList: [],
        facilitiesIds: [],
        characteristics: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入房源名称",
            trigger: "blur",
          },
        ],
        bizcircleId: [
          {
            required: true,
            message: "商圈所属所属商圈",
            trigger: "change",
          },
        ],
        communityId: [
          {
            required: true,
            message: "请选择所属小区",
            trigger: "change",
          },
        ],
        brokerId: [
          {
            required: true,
            message: "请选择负责经纪人",
            trigger: "change",
          },
        ],
        decorateType: [
          {
            required: true,
            message: "装修类型不能为空",
            trigger: "change",
          },
        ],
        cityIds: [
          {
            required: true,
            type: "array",
            message: "地区必选",
            trigger: "change",
          },
        ],
        field118: [
          {
            required: true,
            message: "请选择下拉选择",
            trigger: "change",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择楼层",
            trigger: "change",
          },
        ],
        totalArea: [
          {
            required: true,
            message: "总面积",
            trigger: "blur",
          },
        ],
        orientation: [
          {
            required: true,
            message: "请输入朝向",
            trigger: "blur",
          },
        ],
        addressDesc: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        sellingPrice: [
          {
            required: true,
            message: "请输入销售价格",
            trigger: "blur",
          },
          {
            type: "number",
            message: "必须为数字类型",
            trigger: "blur",
          },
        ],
        isSegmentation: [
          {
            required: true,
            message: "是否可分割不能为空",
            trigger: "change",
          },
        ],
        isIncorporated: [
          {
            required: true,
            message: "是否可注册不能为空",
            trigger: "change",
          },
        ],
        bookingTime: [
          {
            required: true,
            message: "请选择下拉选择",
            trigger: "change",
          },
        ],
        leaseType: [
          {
            required: true,
            message: "卖/出租类型不能为空",
            trigger: "change",
          },
        ],
        saleMethod: [
          {
            required: true,
            message: "销售方式不能为空",
            trigger: "change",
          },
        ],
      },
      brokerIdOptions: [], //经纪人列表
      z: [
        {
          label: "毛坯",
          value: "毛坯",
        },
        {
          label: "简修",
          value: "简修",
        },
        {
          label: "精装",
          value: "精装",
        },
      ],
      field116Props: {
        multiple: false,
        label: "name",
        value: "id",
      },
      isSegmentationOptions: [
        {
          label: "可分割",
          value: "可",
        },
        {
          label: "不可分割",
          value: "否",
        },
      ],
      field104Options: [
        {
          label: "可",
          value: "可",
        },
        {
          label: "否",
          value: "否",
        },
      ],
      seeTime: [
        {
          label: "随时预约可看",
          value: 0,
        },
        {
          label: "仅工作日可看",
          value: 1,
        },
        {
          label: "下班或周末",
          value: 2,
        },
        {
          label: "有租户需预约",
          value: 3,
        },
      ],
      leaseTypeOptions: [
        {
          label: "按房间",
          value: 0,
        },
        {
          label: "按楼层",
          value: 1,
        },
        {
          label: "按楼座",
          value: 2,
        },
        {
          label: "按楼栋",
          value: 3,
        },
      ],
      saleMethodOptions: [
        {
          label: "出租",
          value: 0,
        },
        {
          label: "售卖",
          value: 1,
        },
      ],
      buildOptions: [],
      regionList: [], //地域
      communityIdOptions: [], //小区
      bizcircleList: [], //商圈
      dialogImageUrl: null,
      dialogVisible: false,
      facilityList: [], //设施多选框
      tagsList: [], //特色多选框
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getOtherInfo();
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        insertShop(this.formData).then((res) => {
          if (res.code == 200) {
            alert("添加成功");
            //清空表单
            this.resetForm();
          }
        });
      });
    },
    resetForm() {
      this.formData = {
        name: "",
        bizcircleId: 1,
        communityId: null,
        buildId: 1,
        brokerId: null,
        decorateType: "毛坯",
        level: 0,
        cityIds: [],
        field118: null,
        totalArea: null,
        orientation: null,
        addressDesc: null,
        sellingPrice: null,
        isSegmentation: 0,
        isIncorporated: 1,
        bookingTime: 0,
        leaseType: 0,
        saleMethod: 0,
        imageList: [],
        facilitiesIds: [],
        characteristics: [],
      };
      this.$refs["elForm"].resetFields();
    },
    async getOtherInfo() {
      //获取经纪人
      listBroker().then((res) => {
        this.brokerIdOptions = res.rows;
      });
      //获取区域
      regionListService().then((res) => {
        console.log(res);
        this.regionList = res;
      });
      //获取所有设施
      listFacility().then((res) => {
        console.log("设施数据", res);
        this.facilityList = res.rows;
      });
      //获取所有标签
      listTags().then((res) => {
        console.log(res);
        this.tagsList = res.rows;
      });
      // listBuilding().then((res) => {
      //   this.bizcircleList = res.rows;
      // });
    },
    getField116Options() {
      // TODO 发起请求获取数据
      this.field116Options;
    },
    handleRemove(file, fileList) {
      let index = this.formData.imageList.indexOf(file.url);
      this.formData.imageList.splice(index, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.formData.imageList.push({ imageUrl: res.data });
    },
  },
};
</script>
<style></style>
